<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- meta data -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- title of site -->
    <title>Sign up</title>
    <th:block th:replace="fragments/ctxPath::ctxPath"></th:block>
    <!-- For favicon png -->
    <link rel="shortcut icon" type="image/icon" th:href="@{/logo/favicon.png}"/>

    <!--font-awesome.min.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/font-awesome.min.css}" type="text/css"/>

    <!--animate.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/animate.css}">

    <!--bootstrap.min.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">

    <!-- bootsnav -->
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootsnav.css}">

    <!--style.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/style.css}">

    <!--responsive.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/responsive.css}">

    <!--div layer css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/my-layer-div.css}">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .layui-layer-btn0:hover {
            padding: 0 15px;
        }
    </style>

</head>

<body>

<!-- signin end -->
<section class="signin" style="margin-top: -310px;">
    <div class="container">

        <div class="sign-content">
            <h2>半<span class="yuan">猿</span>修道半<span class="yuan nv">猿</span>君</h2>

            <div class="row">
                <div class="col-sm-12">
                    <div class="signin-form">
                        <form id="register">
                            <div class="form-group">
                                <label for="signin_form">用户名</label>
                                <input type="text" name="username" class="form-control" id="signin_form"
                                       placeholder="请输入用户名" autocomplete="off">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label for="signin_form4">密码</label>
                                <input type="password" name="password" class="form-control" id="signin_form4"
                                       placeholder="请输入密码" autocomplete="off">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label for="signin_form5">重复密码</label>
                                <input type="password" name="rePassword" class="form-control" id="signin_form5"
                                       placeholder="请重新输入密码" autocomplete="off">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label for="signin_form3">邮箱</label>
                                <input type="email" name="email" class="form-control" id="signin_form3"
                                       placeholder="请输入你的邮箱地址" autocomplete="off">
                            </div><!--/.form-group -->
                        </form><!--/form -->
                    </div><!--/.signin-form -->
                </div><!--/.col -->
            </div><!--/.row -->

            <div class="row">
                <div class="col-sm-12">
                    <div class="signin-password">
                        <div class="awesome-checkbox-list">
                            <ul class="unstyled centered">
                                <li>
                                    <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox"
                                           name="accept" value="value2">
                                    <label for="styled-checkbox-2">接受我们的条款和条件</label>
                                </li>
                                <li></li>
                            </ul>
                        </div><!--/.awesome-checkbox-list -->
                    </div><!--/.signin-password -->
                </div><!--/.col -->
            </div><!--/.row -->


            <div class="row submit">
                <div class="col-sm-12">
                    <div class="signin-footer">
                        <button type="button" class="btn signin_btn" id="sign" data-toggle="modal"
                                data-target=".signin_modal">
                            完成绑定
                        </button>
                        <div class="not_login">
                            已有账号 ?
                            <a style="color: #5a84fd;" onclick="bandingUser()" href="javascript:void(0);">即刻绑定</a>
                        </div>
                    </div><!--/.signin-footer -->
                </div><!--/.col-->
            </div><!--/.row -->

        </div><!--/.sign-content -->
    </div><!--/.container -->
</section><!--/.signin -->

<!-- signin end -->

<!--footer copyright start -->
<footer class="footer-copyright">
    <div id="scroll-Top">
        <i class="fa fa-angle-double-up return-to-top" id="scroll-top1" data-toggle="tooltip" data-placement="top"
           title="" data-original-title="Back to Top" aria-hidden="true"></i>
    </div><!--/.scroll-Top-->

</footer><!--/.hm-footer-copyright-->
<!--footer copyright  end -->

<!-- Include all js compiled plugins (below), or include individual files as needed -->
<script th:src="@{/bootstrap/js/jquery.js}"></script>

<!-- Include layer component -->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script th:src="@{/bootstrap/js/JSONUtil.js}"></script>

<!--modernizr.min.js-->
<script th:src="@{/bootstrap/js/modernizr.min.js}"></script>

<!--bootstrap.min.js-->
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

<!-- bootsnav js -->
<!--<script th:src="@{/bootstrap/js/bootsnav.js}"></script>-->

<!-- jquery.sticky.js -->
<script th:src="@{/bootstrap/js/jquery.sticky.js}"></script>
<script th:src="@{/bootstrap/js/jquery.easing.min.js}"></script>


<!--Custom JS-->
<script th:src="@{/bootstrap/js/register_fillInUser.js}"></script>
<script>

    /**
     * 立刻绑定用户
     * 直接输入用户名和密码校验即可
     */
    function bandingUser() {
        layer.open({
            type: 1,  //Page层类型
            area: ['500px', '300px'],
            title: '绑定你的用户信息',
            shade: 0.6,  //遮罩透明度
            anim: 1,  //0-6的动画形式，-1不开启
            content: '<form id="fillUser" class="form-horizontal" style="margin-top: 15px;">' +
                '<div class="col-md-12">' +
                '<div class="form-group">' +
                '<label class="col-sm-2 control-label">用户：</label>' +
                '<div class="col-sm-10">' +
                '<input type="text" name="username" class="form-control" placeholder="请输入用户名">' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label class="col-sm-2 control-label">密码：</label>' +
                '<div class="col-sm-10">' +
                '<input type="password" name="password" class="form-control" placeholder="请输入密码">' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<div class="col-sm-offset-2 col-sm-10">' +
                '<button type="button" style="background: #5a84fd;border-color: #5a84fd;" ' +
                'onclick="bandingUserNow(this)" class="btn btn-success">完成绑定</button>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</form>'
        });
    }

    function bandingUserNow(othis) {
        let data = $(othis).parents("#fillUser").serialize();
        let json = JSONUtil.serializeFormToJson(data);
        let url = ctxPath + "bandingUser";
        ajaxPost(url, json, function () {
            layer.load(1);
        }, function (result) {
            if (result.code === 200) {
                layer.closeAll('loading');
                layer.msg('绑定成功!', {icon: 1, time: 800}, function () {
                    window.location.href = ctxPath + "/index";
                });
            } else {
                layer.closeAll('loading');
                layer.msg(result.message, {icon: 0});
            }
        }, function () {
            layer.closeAll('loading');
            layer.msg('服务器好像出了问题, 请稍后重试', {icon: 0});
        });
    }


</script>

</body>

</html>